<!--重点行业绩效评级报表 performanceRating-->
<template>
    <Layout class="menu-left">
        <Menu mode="horizontal" @on-select='lowerStep' :active-name="modaleShow">
            <MenuItem :name="1">重点行业绩效评级报表</MenuItem>
            <MenuItem :name="2">重点行业绩效评级报表计划</MenuItem>
			<MenuItem :name="3">重点行业绩效评级报表统计</MenuItem>
        </Menu>
        <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;"  :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label="企业名称：" prop="orgId">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId'
                                      :orgTree="true"
                                      :currentOrgId="dataToQuery.companyId"
                                      :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='年度：' prop='year'>
                        <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button v-if='modaleShow!=3' @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button v-if='modaleShow!=3' class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                    <Button v-else class="ivu-btn-query" icon="md-search" @click="queryStatis">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="企业名称：" prop="orgId">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                      :currentOrgId="dataToQuery.companyId" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='年度：' prop='year'>
                        <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="行业类型：" prop="industryTypesArr" >
                        <Select class='query-form-el' placeholder="请选择行业类型" type='text' v-model='dataToQuery.industryTypesArr' multiple>
                            <Option v-for="item in dictMap['sgs-10001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="管控类型：" prop="controlTypesArrays" >
                        <Select class='query-form-el' placeholder="请选择管控类型" type='text' v-model='dataToQuery.controlTypesArr' multiple>
                            <Option v-for="item in dictMap['PR-000001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="正面清单：" prop="positiveListsArrays" >
                        <Select class='query-form-el' placeholder="请选择正面清单" type='text' v-model='dataToQuery.positiveListsArr' multiple>
                            <Option v-for="item in dictMap['PR-000002']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8" >
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-if='modaleShow!=3' class="query-form">
                <Col span="24">
                    <Button size="large" v-if="modaleShow==2" class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
										<download-button :api="exportUrl" :queryForm="dataToQuery" :exportFormBefore="exportFormBefore" />
                    <!-- <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button> -->
                </Col>
            </Row>
        </Form>
		<div v-if='modaleShow!=3'>
			<Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
				   border :columns="columns1"  :data="dataTable" >
			</Table>
			<Row style="margin-right:10px;">
				<Col span="24" >
					<Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
				</Col>
			</Row>
			<Modal :title="getModalTitle('重点行业绩效评级报表')" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=700 :styles="{height:'520px'}"  class-name='limit-height-dialog' >
				<Row>
					<Col span="24">
						<Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?120:null">
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="23">
									<FormItem label='企业名称：' prop='companyId'>
										<div v-if="mode === 'view'">{{dataToView.companyName}}</div>
										<cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
									</FormItem>
								</Col>
							</Row>
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
									<FormItem label="计划类型：" prop="playType" >
										<div v-if="mode === 'view'">{{dataToView.playType}}</div>
										<Select v-else class='w' placeholder="请选择计划类型" v-model='dataToView.playType'
										  @on-change="planTypeChange">
											<Option value="年度计划">年度计划</Option>
											<Option value="临时计划">临时计划</Option>
										</Select>
									</FormItem>
								</Col>
								<Col span="11">
									<FormItem label='年度：' prop='rptPeroid'>
										<div v-if="mode === 'view'">{{ dataToView.rptPeroid }}</div>
										<Input v-else class='' placeholder="请选择年度" type='text' readonly v-model='dataToView.rptPeroid'></Input>
										<!--<DatePicker v-else class="w" placeholder="请选择年度" v-model='dataToView.rptPeroidDate' type="year"></DatePicker>-->
									</FormItem>
								</Col>
							</Row>
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
									<FormItem label='行业类型：' prop='industryType'>
										<div v-if="mode === 'view'">{{this.dictMap['sgs-10001'] && this.dictMap['sgs-10001'][dataToView.industryType] && this.dictMap['sgs-10001'][dataToView.industryType].codingName}}</div>
										<Select v-else class='w' placeholder="请选择项目分类" type='text' v-model='dataToView.industryType' filterable>
											<Option v-for="item in dictMap['sgs-10001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
										</Select>
									</FormItem>
								</Col>
								<Col span="11">
									<FormItem label='管控类型：' prop='controlType'>
										<div v-if="mode === 'view'">{{this.dictMap['PR-000001'] && this.dictMap['PR-000001'][dataToView.controlType] && this.dictMap['PR-000001'][dataToView.controlType].codingName}}</div>
										<Select v-else class='w' placeholder="请选择管控类型" type='text' v-model='dataToView.controlType'>
											<Option v-for="item in dictMap['PR-000001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
										</Select>
									</FormItem>
								</Col>
							</Row>
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
									<FormItem label='正面清单：' prop='positiveList'>
										<div v-if="mode === 'view'">{{this.dictMap['PR-000002'] && this.dictMap['PR-000002'][dataToView.positiveList] && this.dictMap['PR-000002'][dataToView.positiveList].codingName}}</div>
										<Select v-else class='w' placeholder="请选择正面清单" type='text' v-model='dataToView.positiveList'>
											<Option v-for="item in dictMap['PR-000002']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
										</Select>
									</FormItem>
								</Col>
								<Col span="11">
									<FormItem label="计划执行情况：" prop="playImplementation" >
										<div v-if="mode === 'view'">{{dataToView.playImplementation}}</div>
										<Select v-else class='w' placeholder="请选择计划执行情况" v-model='dataToView.playImplementation'>
											<Option value="执行中">执行中</Option>
											<Option value="已完成">已完成</Option>
											<Option value="已终止">已终止</Option>
										</Select>
									</FormItem>
								</Col>
								<Alert v-if="dataToView.playImplementation!=='执行中'" type="error">计划执行情况为已完成、已终止后，不能继续修改删除数据。</Alert>
							</Row>
							<!--<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
									<FormItem label='非评级：' prop='nonRating'>
										<div v-if="mode === 'view'">{{this.dictMap['PR-000003'] && this.dictMap['PR-000003'][dataToView.nonRating] && this.dictMap['PR-000003'][dataToView.nonRating].codingName}}</div>
										<Select v-else class='w' placeholder="请选择非评级" type='text' v-model='dataToView.nonRating' >
											<Option v-for="item in dictMap['PR-000003']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
										</Select>
									</FormItem>
								</Col>
								<Col span="11">
									<FormItem label='长期停产：' prop='ltShutdown'>
										<div v-if="mode === 'view'">{{this.dictMap['PR-000004'] && this.dictMap['PR-000004'][dataToView.ltShutdown] && this.dictMap['PR-000004'][dataToView.ltShutdown].codingName}}</div>
										<Select v-else class='w' placeholder="请选择长期停产" type='text' v-model='dataToView.ltShutdown'>
											<Option v-for="item in dictMap['PR-000004']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
										</Select>
									</FormItem>
								</Col>
							</Row>-->
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
									<FormItem label='填表人：' prop='registrant'>
										<div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
										<Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
									</FormItem>
								</Col>
								<Col span="11">
									<FormItem label='填表时间：' prop='registTime'>
										<div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
										<DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.createDate' readonly></DatePicker>
									</FormItem>
								</Col>
							</Row>
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
								<FormItem label='填表人电话：' prop='createMobile'>
									<div v-if="mode === 'view'">{{dataToView.createMobile}}</div>
									<Input v-else type='text' v-model='dataToView.createMobile'></Input>
								</FormItem>
								</Col>
								<Col span="11">
								</Col>
							</Row>
						</Form>
					</Col>
				</Row>
				<div slot="footer">
					<Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
					<Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
					<Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
				</div>
			</Modal>
		</div>
		
		<div v-if='modaleShow==3'>
			<Row :gutter="24" >
			  <Col span="12">
			    <!-- <Card dis-hover class='statistics'> -->
			      <Row class='statistics'>
			        <Col span="24" class="statistics-text-title">
			          <span>年度计划 {{dataMap.yearPlan || 0}}</span>
			        </Col>
			      </Row>
			    <!-- </Card> -->
			  </Col>
			  <Col span="12">
			    <!-- <Card dis-hover class='statistics'> -->
			      <Row class='statistics'>
			        <Col span="24" class="statistics-text-title">
			          <span>临时计划 {{dataMap.temPlan || 0}}</span>
			        </Col>
			      </Row>
			    <!-- </Card> -->
			  </Col>
			</Row>
			<Row :gutter="24" style="margin-top: 5px">
			  <Col span="8">
			    <Card dis-hover>
			      <div ref="echart1" :style="{height: '200px'}"></div>
			    </Card>
			  </Col>
			  <Col span="8">
			    <Card dis-hover>
			      <div ref="echart2" :style="{height: '200px'}"></div>
			    </Card>
			  </Col>
			  <Col span="8">
			    <Card dis-hover>
			      <div ref="echart3" :style="{height: '200px'}"></div>
			    </Card>
			  </Col>
			</Row>
			<Row :gutter="24" style="margin-top: 15px">
			  <Col span="24">
			    <Card dis-hover>
			      <div ref="echart4" :style="{height: '240px'}"></div>
			    </Card>
			  </Col>
			</Row>
		</div>
		
	</Layout>
</template>

<script>
	import echarts from "echarts";
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
	import { sessionStorage } from '@/common/cacheUtils.js'
    export default {
        name: "performanceRating",
        components:{
            cascaderDom
        },
        data(){
            return {
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'companyName',title: '企业名称', fixed: 'left', align: 'center', minWidth:240 },
                    { key:'rptPeroid',title: '年度', fixed: 'left', align: 'center', minWidth:80 },
                    { key:'playImplementation',title: '计划执行情况',  align: 'center' , minWidth :110},
                    { key:'playType',title: '计划类型', align: 'center', minWidth :90},
                    { key:'industryType',title: '行业类型',  align: 'center', minWidth:100, render:(h, params)=>{
                            return h('span',  (this.dictMap['sgs-10001'] && this.dictMap['sgs-10001'][params.row.industryType] && this.dictMap['sgs-10001'][params.row.industryType].codingName))
                        } },
                    { key:'controlType',title: '管控类型',  align: 'center' , minWidth:100, render:(h, params)=>{
                            return h('span',  (this.dictMap['PR-000001'] && this.dictMap['PR-000001'][params.row.controlType] && this.dictMap['PR-000001'][params.row.controlType].codingName))
                        }},
                    { key:'positiveList',title: '正面清单',  align: 'center', minWidth:100, render:(h, params)=>{
                            return h('span',  (this.dictMap['PR-000002'] && this.dictMap['PR-000002'][params.row.positiveList] && this.dictMap['PR-000002'][params.row.positiveList].codingName))
                        } },
                   /* { key:'nonRating',title: '非评级',  align: 'center', minWidth:100 , render:(h, params)=>{
                            return h('span',  (this.dictMap['PR-000003'] && this.dictMap['PR-000003'][params.row.nonRating] && this.dictMap['PR-000003'][params.row.nonRating].codingName))
                        }},
                    { key:'ltShutdown',title: '长期停产',  align: 'center', minWidth:100, render:(h, params)=>{
                            return h('span',  (this.dictMap['PR-000004'] && this.dictMap['PR-000004'][params.row.ltShutdown] && this.dictMap['PR-000004'][params.row.ltShutdown].codingName))
                        } },*/
                    { key:'createUserName',title: '填表人',  align: 'center', minWidth:100 },
                    { key:'createDate',title: '填表时间',  align: 'center', minWidth:100 , render: this.renderCellDate },
                    // this.getActionColumns()
                    {title: '操作', key: 'action', fixed: 'right', align: 'center', width:160,
                        render: (h, params) => {
                            if (this.modaleShow == 1) {
                                return h('div', [
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        style: {fontSize: '14px',},
                                        on: {
                                            click: () => {
                                                this.viewData(params);
                                            }
                                        }
                                    }, '详情')
                                ])
                            } else {
                                if (params.row.playImplementation==='执行中'&&(this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId  || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined
                                || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined)) {
                                    return h('div', [
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px',},
                                            on: {
                                                click: () => {
                                                    this.viewData(params);
                                                }
                                            }
                                        }, '详情'),
                                        h('Divider', {props: {type: 'vertical'}}, ''),
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            disabled: true,
                                            style: {fontSize: '14px'},
                                            on: {
                                                click: () => {
                                                    this.editData(params);
                                                }
                                            }
                                        }, '修改'),
                                        h('Divider', {props: {type: 'vertical'}}, ''),
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px', color: 'red'},
                                            on: {
                                                click: () => {
                                                    this.deleteData(params);
                                                }
                                            }
                                        }, '删除')
                                    ]);
                                } else {
                                    return h('div', [
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px',},
                                            on: {
                                                click: () => {
                                                    this.viewData(params);
                                                }
                                            }
                                        }, '详情'),
                                        h('Divider', {props: {type: 'vertical'}}, ''),
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px', color: '#c5c8ce'}
                                        }, '修改'),
                                        h('Divider', {props: {type: 'vertical'}}, ''),
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px', color: '#c5c8ce'}
                                        }, '删除')
                                    ]);
                                }
                            }
                        }}
                ],
                ruleCustom : {
                    companyId: [ { required: true, message: '请填写企业名称', trigger: 'change' } ],
                    rptPeroid: [ { required: true, message: '请选择年度', trigger: 'change', } ],
                    industryType: [ { required: true, message: '请填写行业类型', trigger: 'change'}],
                    controlType: [ { required: true, message: '请填写管控类型', trigger: 'change'}],
                    createMobile: [{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3675849]\d{9}))$/, required: true, message: '请填写填表人电话', trigger: 'change' }],
					//positiveList: [ { required: true, message: '请填写正面清单', trigger: 'change'}],
                    // nonRating: [ { required: true, message: '请填写非评级', trigger: 'change'}],
                    // ltShutdown: [ { required: true, message: '请填写长期停产', trigger: 'change'}]
                    playType: [ { required: true, message: '请填写计划类型', trigger: 'change', } ],
                    playImplementation: [ { required: true, message: '请选择计划执行情况', trigger: 'change', } ],
                },
                tableHeight:10,
                dictMap: {},
                // api
                queryUrl:Api.queryEnPerformanceRating,
                exportUrl:Api.exportEnPerformanceRating,
                deleteUrl:Api.deleteEnPerformanceRating,
                bthDeleteUrl:Api.batchDeleteEnPerformanceRating,
                getUrl:Api.getEnPerformanceRating,
                updateUrl:Api.updateEnPerformanceRating,
                saveUrl:Api.saveEnPerformanceRating,

                modaleShow: 1,
				dataMap:{},
            }
        },
        async mounted() {
            await this.$http.get(Api.queryDictBycode+"sgs-10001,PR-000001,PR-000002,PR-000003,PR-000004",{}).then((res)=>{
                // 数据字典 list 转 map，方便调用
                this.dictMap = {
                    'sgs-10001':this.dictListToMap(res.data.data['sgs-10001']),
                    'PR-000001':this.dictListToMap(res.data.data['PR-000001']),
                    'PR-000002':this.dictListToMap(res.data.data['PR-000002']),
                    'PR-000003':this.dictListToMap(res.data.data['PR-000003']),
                    'PR-000004':this.dictListToMap(res.data.data['PR-000004'])
                }
            }).catch(e => {
                this.$Message.error("数据字典获取失败")
            });
            this.setTableHeight();
            this.lowerStep(this.modaleShow)
        },
        methods:{
            ...pageCommonFunction,
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            reset1(){
				this.dataToQuery = {};
				if (this.$refs.queryOrgCascader) {
				    this.$refs.queryOrgCascader.resetCurrentOrg();
				}
				this.pagedata.currentPage=1
                this.lowerStep(this.modaleShow)
            },
						exportFormBefore(dataToQuery) {
							if(dataToQuery.industryTypesArr) {
                    dataToQuery.industryTypes = this.arrayToInFormat(dataToQuery.industryTypesArr)
                }
                if(dataToQuery.controlTypesArr) {
                    dataToQuery.controlTypes = this.arrayToInFormat(dataToQuery.controlTypesArr)
                }
                if(dataToQuery.positiveListsArr) {
                    dataToQuery.positiveLists = this.arrayToInFormat(dataToQuery.positiveListsArr)
                }
                if(dataToQuery.yearDate) {
                    dataToQuery.year = dataToQuery.yearDate.getFullYear();
                }
						},
            query() {
                if(this.dataToQuery.industryTypesArr) {
                    this.dataToQuery.industryTypes = this.arrayToInFormat(this.dataToQuery.industryTypesArr)
                }
                if(this.dataToQuery.controlTypesArr) {
                    this.dataToQuery.controlTypes = this.arrayToInFormat(this.dataToQuery.controlTypesArr)
                }
                if(this.dataToQuery.positiveListsArr) {
                    this.dataToQuery.positiveLists = this.arrayToInFormat(this.dataToQuery.positiveListsArr)
                }
                if(this.dataToQuery.yearDate) {
                    this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
                }
                this.queryAjax();
            },
            submit(name) {
                this.submitAjaxValidateField(name);
            },
            async beforeEditDialogOpen(data) {
                // data.row.rptPeroidDate = new Date(data.row.rptPeroid + '-01-01');
            },
            createEmptyDataToAdd(){
                return {
                    rptPeroid: (new Date().getFullYear()+1).toString(),
					createMobile: sessionStorage('userId').getObject('userId').mobileNumber,
				}
            },
			planTypeChange(val){
			    if (this.mode === 'add') {
			        if (val=='临时计划'){
			            this.dataToView.rptPeroid=new Date().getFullYear().toString()
			        } else {
			            this.dataToView.rptPeroid=(new Date().getFullYear()+1).toString()
			        }
			    }
			},
            lowerStep(name) {
                this.modaleShow = name
                this.dataToQuery.modaleShow = name
				if (name == 3) {
					this.$nextTick(function () {
					    this.queryStatis();
					})
				} else {
					if (name == 1) {
					    this.dataToQuery.playImplementation ='已完成'
					}else{
					    delete this.dataToQuery['playImplementation']
					}
					this.setTableHeight()
					this.query();
				}
			},
			
			queryStatis() {
				if(this.dataToQuery.yearDate) {
				    this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
				}
				this.pageStatus.loading = true
				let container1 = echarts.init(this.$refs.echart1);
				let container2 = echarts.init(this.$refs.echart2);
				let container3 = echarts.init(this.$refs.echart3);
				let container4 = echarts.init(this.$refs.echart4);
				container1.showLoading({
				  text : '正在加载数据'
				});
				container2.showLoading({
				  text : '正在加载数据'
				});
				container3.showLoading({
				  text : '正在加载数据'
				});
				container4.showLoading({
				  text : '正在加载数据'
				});
				this.$http.post(this.queryUrl+'/statistics', this.dataToQuery).then((res) => {
					if (res.data.status === 201) {
						this.$Message.error(res.data.msg);
					}
					if (res.data.status === 200) {
						this.pageStatus.loading = false
						this.dataMap = res.data.data;
						
						let option1 = this.getOption(this.dataMap.controlType,'管控类型');
						container1.hideLoading();
						container1.setOption(option1);
						window.onresize = container1.resize;
			
						let option2 = this.getOption(this.dataMap.implementation,'执行情况');
						container2.hideLoading();
						container2.setOption(option2);
						// container2.on('click', (param)=> {
							// this.modelVisible = true
						 //    event.stopPropagation()// 阻止冒泡
						 //    this.echartsName = param.name;
						 //    this.queryModel()
						// });
						window.onresize = container2.resize;
						
						let option3 = this.getOption(this.dataMap.positive,'正面清单');
						container3.hideLoading();
						container3.setOption(option3);
						window.onresize = container3.resize;
						// 行业类型
						let option4 = this.getOption2();
						
						this.dataMap.industryType.forEach(i =>{
						    option4.xAxis.data.push(i.name );
						    option4.series[0].data.push(i.value);
						})
						container4.hideLoading();
						container4.setOption(option4);
						window.onresize = container4.resize;
					}
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pageStatus.loading = false
				})
			},
			getOption(data,titleName) {
				return {
					title: {
						text: titleName,
						textStyle: {
							fontSize: 14,
						},
						left: 'center'
					},
					tooltip: {
						show: true,
					},
					legend: {
						icon: "circle",
						orient: 'vertical',
						right: '4%',
						y: "center",
						type: 'scroll',
						itemHeight: 18,
						tooltip: {
							show: true
						},
		// 				formatter: function (name) {
		// 					let total = 0;
		// 					let target;
		// 					for (let i = 0; i < data.length; i++) {
		// 						total += data[i].value;
		// 						if (data[i].name == name) {
		// 							target = data[i].value;
		// 						}
		// 					}
		// 					if (!target) {
		// 						target = 0;
		// 					}
		// 					let percentage = 0
		// 					if (total) {
		
		// 						percentage = ((target / total) * 100).toFixed(2) + '%';
		// 					}
		
		// 					return name + '  ' + target + '  ' + percentage;
		// 				},
					},
					color: ['#42A5F5', '#4CD1A8', '#FFC310', '#FD5C50'],
					series: [
						{
							// name: titleName,
							type: 'pie',
							radius: ['0', '60%'],
							center: ["25%", "50%"],
							// avoidLabelOverlap: false,
							// itemStyle: {
							// 	borderRadius: 10,
							// 	borderColor: '#fff',
							// 	borderWidth: 8,
							// },
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: false,
								}
							},
							labelLine: {
								show: false
							},
							data:data
						}
					]
				};
			},
			getOption2(){
			    return {
					title: {
						text: '行业类型',
						textStyle: {
							fontSize: 14,
						},
						// left: 'center'
					},
					color: ['#42A5F5'],
			        grid:{
			            bottom: 10,
			            left: 0,
			            right: 0,
			            top: 30,
						containLabel: true,
			        },
					tooltip: {
					    trigger: 'axis',
					    axisPointer: {
					        type: 'shadow'
					    }
					},
			        xAxis: {
			            type: 'category',
			            data: [],
						axisLabel: {
						  //x轴文字的配置
						  show: true,
						  interval: 0,//使x轴文字显示全
						  textStyle: {
						    fontSize: 10,
						    fontFamily: 'HiraginoSansGB-W3, HiraginoSansGB',
						    color: 'rgb(51,51,51)',
						    lineHeight: 14
						  },
						  formatter: function (params) {
						    var newParamsName = "";
						    var paramsNameNumber = params.length;
						    var provideNumber = 5; //一行显示几个字
						    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
						    if (paramsNameNumber > provideNumber) {
						      for (var p = 0; p < rowNumber; p++) {
						        var tempStr = "";
						        var start = p * provideNumber;
						        var end = start + provideNumber;
						        if (p == rowNumber - 1) {
						          tempStr = params.substring(start, paramsNameNumber);
						        } else {
						          tempStr = params.substring(start, end) + "\n";
						        }
						        newParamsName += tempStr;
						      }
						    } else {
						      newParamsName = params;
						    }
						    return newParamsName;
						  }
						}
			        },
			        yAxis: {
			            type: 'value',
			        },
			        series: [
			            {
							name: '行业类型',
			                data: [],
			                type: 'bar',
			                // backgroundStyle: {
			                //     color: 'rgba(180, 180, 180, 0.2)'
			                // },
			                label: {
			                    show: true,
			                    position: 'top'
			                },
			            }
			        ]
			    };
			},
			
        },
        watch:{
			modaleShow: function (val) {
				if (val == 3 && this.switchFlag) {
					this.switchQuery(false)
				} else if (val !== 3) {
					this.pagedata.currentPage=1
					this.lowerStep(val)
				} 
			}
        },

    }
</script>

<style lang='css' scoped>
    /deep/ .ivu-table .table-summary-row {
        border-top: 1px solid #e8eaec;
        background-color: #f8f8f9;
    }

    /deep/ .ivu-table .table-summary-row td {
        border-right: 1px solid #e8eaec;
        background-color: #f8f8f9;
    }
	.statistics {
		padding: 8px;
		width: 100%;
		height: 40px;
		background-image: url("../../../../assets/leaderPerformance/3.png");
		background-repeat: no-repeat;
		background-position: -30px, -10%;
		background-size: 112%, 112%;
	}
	.statistics-text-title {
	  font-size: 20px;
	  font-family: HiraginoSansGB-W6;
	  font-weight: normal;
	  color: #FFFFFF;
	  line-height: 25px;
	  text-align: center;
	  letter-spacing: 1px;
	}
</style>
